<template>
  <div class="container">
    <div class="tab">
      <div class="tab-item"
           :class="{'active':item.tab==tab}"
           v-for="(item, index) in tab_arr"
           :key="index"
           @tap="toggle_tab (item)">
        <span class="msg">
          {{item.msg}}
        </span>
      </div>
    </div>
    <ul class="list">
      <scroll-view scroll-y
                   style="height:100%"
                   v-if="list_data.length>0"
                   @scrolltolower="load_more">
        <li class="list-item"
            v-for="(item, index) in list_data"
            :key="index"
            @tap="todetail(item)">
          <!-- 订单每一项头部 -->
          <div class="top-bar clearfix">
            <!-- 状态 -->
            <div class="status">
              {{item.order_status_name}}
            </div>
            <!-- 提示（关闭状态 || 剩余时间） -->
            <div class="tip"
                 v-if="item.order_status==1||item.order_status==5">
              <div class="close-status"
                   v-if="item.order_status==5">
                {{item.order_status_tag}}
              </div>
              <div class="tip-time"
                   v-if="item.order_status==1">
                剩余支付时间 {{item.end_time}}
              </div>
            </div>
          </div>
          <div class="main">
            <div class="logo">
              <img :src="imgUrl+item.project_detail.project_image"
                   v-if="imgUrl&&item.project_detail.project_image"
                   alt=""
                   class="img">
            </div>
            <div class="info">
              <div class="title">
                {{item.project_detail.project_name}}
              </div>
              <div class="hos-name">
                {{item.project_detail.hospital_name}}
              </div>
              <div class="plus"
                   v-if="item.plus_title&&item.plus_title!=''">
                {{item.plus_title}}
              </div>
              <div class="price">
                <div class="grade"
                     :class="{'disabled':item.order_status>=5}"
                     v-if="item.project_deduction_credit>0">
                  积分可抵 {{item.project_deduction_credit}}
                </div>
                <div class="money"
                     :class="{'disabled':item.order_status>=5}">
                  <span class="icon">￥</span>
                  <span class="num">
                    {{item.project_detail.project_price}}
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div class="bottom clearfix">
            <div class="btn-bar">
              <!-- 立即预约按钮 -->
              <div class="booking-btn"
                   v-if="item.order_status==2&&item.type==1">
                立即预约
              </div>
              <div class="booking-btn"
                   v-if="item.order_status==2&&item.type==2">
                去消费
              </div>

              <!-- <div class="booking-btn"
                   v-if="item.order_status==2"
                   @tap.stop="change_id(item)">
                <picker mode="date"
                        @change="booking_order"
                        :value="booking_time"
                        :start="booking_start">
                  立即预约
                </picker>
              </div> -->
              <!-- 查看预约单 -->
              <div class="booking-detail-btn"
                   v-if="item.order_status==3"
                   @tap.stop="todetail(item)">
                查看预约单
              </div>
              <!-- 评价 -->
              <div class="evaluat-btn"
                   v-if="item.order_status==4"
                   @tap.stop="evaluat (item)">
                评价
              </div>
            </div>
          </div>

        </li>
      </scroll-view>
      <div class="empty"
           v-else>
        <img :src="ImgBaseUrl+'/mp_2.9/ic_dafault@2x.png'"
             v-if="ImgBaseUrl"
             mode="widthFix"
             alt=""
             class="img">
        <div class="msg">
          您还没有相关订单
        </div>
      </div>
    </ul>
  </div>
</template>
<script>
import common from "@/assets/js/mmk_common.js";
export default {
  data () {
    return {
      imgUrl: common.image_response,
      ImgBaseUrl: common.image_resource,
      tab_arr: [
        {
          msg: '全部',
          tab: 0
        },
        {
          msg: '待支付',
          tab: 1
        },
        {
          msg: '待消费',
          tab: 2
        },
        {
          msg: '预约中',
          tab: 3
        },
        {
          msg: '已消费',
          tab: 4
        },
        {
          msg: '已关闭',
          tab: 5
        },
      ],
      tab: 0,
      page: 1,
      isbottom: false,
      list_data: [],
      booking_time: "",
      booking_start: new Date(new Date().getTime()).Format('yyyy-MM-dd'),
      booking_end: "",
      order_id: 0
    };
  },
  onLoad (options) {
    wx.setNavigationBarTitle({
      title: "订单"
    });
    Object.assign(this.$data, this.$options.data());
  },
  onShow () {
    this.get_list()
  },
  methods: {
    // 切换tab栏
    toggle_tab (item) {
      if (this.tab == item.tab) {
        return false
      }
      this.tab = item.tab
      this.page = 1
      this.isbottom = false
      this.get_list()
    },
    // 获取订单列表
    get_list () {
      if (this.isbottom) {
        return false
      }
      wx.showLoading({
        title: '加载中', //提示的内容,
        mask: true, //显示透明蒙层，防止触摸穿透,
        success: res => { }
      });
      common.fly_post('api/v4_2/life/order_list', {
        page: this.page,
        size: 10,
        status: this.tab
      }, result => {
        let res = result.data
        if (res.status_code == '0') {
          wx.hideLoading();
          if (res.data.data.length > 0) {
            res.data.data.forEach(item => {
              if (item.order_status == 1) {
                let now_time = new Date().getTime()
                let end_time = item.pay_end_time * 1000 - now_time
                //计算出相差天数
                let days = Math.floor(end_time / (24 * 3600 * 1000))
                //计算出小时数
                let leave1 = end_time % (24 * 3600 * 1000)    //计算天数后剩余的毫秒数
                let hours = Math.floor(leave1 / (3600 * 1000))
                //计算相差分钟数
                let leave2 = leave1 % (3600 * 1000)        //计算小时数后剩余的毫秒数
                let minutes = Math.floor(leave2 / (60 * 1000))
                //计算相差秒数
                let leave3 = leave2 % (60 * 1000)      //计算分钟数后剩余的毫秒数
                let seconds = Math.round(leave3 / 1000)
                // //    let day = days >= 10 ? days : '0' + days
                let time_hours = hours >= 10 ? hours : "0" + hours
                let time_minutes = minutes >= 10 ? minutes : "0" + minutes
                let time_seconds = seconds >= 10 ? seconds : "0" + seconds
                item.end_time = `${time_hours}:${time_minutes}:${time_seconds}`
              }
            });
          }
          if (this.page == 1) {
            this.list_data = res.data.data
          } else if (this.page > 1 && res.data.data.length > 0) {
            let arr = [...this.list_data]
            arr.push(...res.data.data)
            this.list_data = arr
          } else if (this.page > 0 && res.data.data.length == 0) {
            this.isbottom = true
            wx.showToast({
              title: '没有更多了', //提示的内容,
              icon: 'none', //图标,
              duration: 1500, //延迟时间,
              mask: false, //显示透明蒙层，防止触摸穿透,
              success: res => { }
            });
          }
        } else {
          wx.hideLoading();
          wx.showToast({
            title: res.message, //提示的内容,
            icon: 'none', //图标,
            duration: 1500, //延迟时间,
            mask: false, //显示透明蒙层，防止触摸穿透,
            success: res => { }
          });
        }
      })
    },
    // 查看订单详情
    todetail (item) {
      if (item.type == 1) {
        wx.navigateTo({ url: '/pages/package_mine/project_order_detail/main?order_id=' + item.id });
      } else {
        wx.navigateTo({ url: '/pages/package_mine/project_order_lifebeauty_detail/main?order_id=' + item.id });
      }

    },
    // 加载更多
    load_more () {
      this.page++
      this.get_list()
    },
    // 立即预约
    booking_order (e) {
      let that = this
      const booking_date = e.mp.detail.value
      wx.showLoading({
        title: '提交中', //提示的内容,
        mask: true, //显示透明蒙层，防止触摸穿透,
        success: res => { }
      });
      common.fly_post('/api/v4_2/project/order/reservation', {
        order_id: this.order_id,
        appointment_time: booking_date
      }, result => {
        let res = result.data
        if (res.status_code == '0') {
          wx.showToast({
            title: '预约成功', //提示的内容,
            icon: 'none', //图标,
            duration: 1500, //延迟时间,
            mask: true, //显示透明蒙层，防止触摸穿透,
            success: res => {
              setTimeout(() => {
                that.page = 1
                that.tab = 3
                that.isbottom = false
                that.get_list()
              }, 1500);
            }
          });
        } else {
          wx.showToast({
            title: res.message, //提示的内容,
            icon: 'none', //图标,
            duration: 1500, //延迟时间,
            mask: false, //显示透明蒙层，防止触摸穿透,
            success: res => { }
          });
        }
      })
    },
    change_id (item) {
      this.order_id = item.id
      console.log(this.order_id);

    },
    // 查看预约详情
    booking_detail (item) {
      wx.navigateTo({ url: `/pages/package_projects/yy_order_detail/main?booking_id=${item.project_order_id}` });
    },
    // 评价
    evaluat (item) {
      wx.navigateTo({ url: '/pages/package_mine/project_evaluation/main?id=' + item.id });
    }
  }
};
</script>

<style scoped lang="less">
.container {
  width: 100%;
  height: 100%;
  background: rgba(243, 244, 246, 1);
  display: flex;
  flex-direction: column;
  .tab {
    width: 100%;
    height: 45px;
    display: flex;
    background-color: #fff;
    .tab-item {
      flex: 1;
      font-size: 14px;
      font-family: "PingFangSC-Regular";
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      line-height: 45px;
      text-align: center;
      .msg {
        height: 100%;
        display: inline-block;
      }
      &.active {
        .msg {
          color: rgba(246, 70, 101, 1);
          position: relative;
          &::before {
            content: "";
            width: 100%;
            height: 4px;
            background: rgba(246, 70, 101, 1);
            border-radius: 2px;
            position: absolute;
            left: 0;
            bottom: 0;
          }
        }
      }
    }
  }
  .list {
    flex: 1;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    .list-item {
      width: 100%;
      box-sizing: border-box;
      min-height: 160px;
      margin-top: 10px;
      padding: 10px 15px 15px 15px;
      background-color: #fff;
      .top-bar {
        width: 100%;
        .status {
          float: left;
          font-size: 14px;
          font-family: "PingFangSC-Regular";
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
          line-height: 20px;
        }
        .tip {
          float: right;
          .close-status {
            font-size: 14px;
            font-family: "PingFangSC-Regular";
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            line-height: 20px;
          }
          .tip-time {
            font-size: 14px;
            font-family: "PingFangSC-Regular";
            font-weight: 400;
            color: rgba(247, 89, 117, 1);
            line-height: 20px;
          }
        }
      }
      .main {
        margin-top: 15px;
        display: flex;
        position: relative;
        .logo {
          width: 100px;
          height: 100px;
          .img {
            width: 100%;
            height: 100%;
            display: block;
          }
        }
        .info {
          flex: 1;
          padding-left: 10px;
          position: relative;
          .title {
            font-size: 14px;
            font-family: "PingFangSC-Regular";
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
          .hos-name {
            margin-top: 5px;
            font-size: 12px;
            font-family: "PingFangSC-Regular";
            font-weight: 400;
            color: rgba(102, 102, 102, 1);
            line-height: 17px;
          }
          .plus {
            padding: 0 5px;
            margin: 4px 0;
            line-height: 16px;
            font-size: 10px;
            font-family: "PingFangSC-Medium", "PingFang SC";
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            background-image: url(https://img.ameimeika.com/h5_images/mp_images/mp_3.0.2/plus_bg%402x.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            display: inline-block;
          }
          .price {
            font-size: 10px;
            position: absolute;
            bottom: 0;
            left: 10px;
            .grade {
              font-size: 12px;
              font-family: "PingFangSC-Medium";
              font-weight: 500;
              color: rgba(255, 125, 0, 1);
              line-height: 17px;
              &.disabled {
                color: rgba(102, 102, 102, 1) !important;
              }
            }
            .money {
              .icon {
                font-family: "PingFangSC-Regular";
                font-weight: 400;
                color: rgba(255, 56, 62, 1);
                line-height: 14px;
                display: inline-block;
                vertical-align: baseline;
              }
              .num {
                font-size: 16px;
                font-family: "PingFangSC-Semibol" d;
                font-weight: 600;
                color: rgba(255, 56, 62, 1);
                line-height: 22px;
                display: inline-block;
                vertical-align: baseline;
              }
              &.disabled {
                .icon,
                .num {
                  color: rgba(102, 102, 102, 1) !important;
                }
              }
            }
          }
        }
      }
      .bottom {
        margin-top: 20px;

        .btn-bar {
          float: right;
          .booking-btn {
            width: 78px;
            height: 25px;
            background: rgba(255, 56, 62, 1);
            border-radius: 20px;
            font-size: 12px;
            font-family: "PingFangSC-Regular";
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            line-height: 25px;
            text-align: center;
          }
          .booking-detail-btn {
            width: 78px;
            height: 25px;
            border-radius: 20px;
            border: 1px solid rgba(246, 70, 101, 1);
            font-size: 12px;
            font-family: "PingFangSC-Regular";
            font-weight: 400;
            color: rgba(255, 56, 62, 1);
            line-height: 25px;
            text-align: center;
          }
          .evaluat-btn {
            width: 60px;
            height: 25px;
            border-radius: 20px;
            border: 1px solid rgba(246, 70, 101, 1);
            font-size: 12px;
            font-family: "PingFangSC-Regular";
            font-weight: 400;
            color: rgba(255, 56, 62, 1);
            line-height: 25px;
            text-align: center;
          }
        }
      }
    }
    .empty {
      position: absolute;
      top: 70px;
      left: 50%;
      transform: translateX(-50%);
      .img {
        width: 129px;
        display: block;
      }
      .msg {
        margin-top: 13px;
        text-align: center;
        font-size: 14px;
        font-family: "PingFangSC-Regular";
        font-weight: 400;
        color: rgba(190, 190, 190, 1);
        line-height: 20px;
      }
    }
  }
}
</style>


